﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Echo Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
    <script>
        var websocket;

        $(document).ready(function () {
            if (!window.WebSocket && window.MozWebSocket) {
                window.WebSocket = window.MozWebSocket;
            }

            var uri = 'ws://FortuneArterial:18003/MessageService.svc' +
                    '?Name=' + $("#name").val();
            websocket = new WebSocket(uri);
            connect();

            $('#echoForm').submit(function (event) {
                $('#echoForm')
                    .add('#echoForm > *')
                    .attr('disabled', 'disabled');

                window.setInterval(function () {
                    websocket.send("the time is " + new Date());
                }, 1000);
                event.preventDefault();
            });

        });

        function connect() {
            $('#messages').prepend('<div>Connecting...</div>');

            websocket.onopen = function () {
                window.focus();
                //$('#echoForm').hide();
                $('#outputArea').show();
                
                $('#messages').html(
                    '<div>Connected. Waiting for messages...</div>');
            };

            websocket.onclose = function () {
                if (document.readyState == "complete") {
                    var warn = $('<div>').html(
                        'Connection lost. Refresh the page to start again.').
                        css('color', 'red');
                    $('#messages').append(warn);
                }
            };

            websocket.onmessage = function (event) {
                $("#messages").append(event.data + "<br>");
            };
        };

</script>
</head>
<body>
    <form id="echoForm" action="">
        <input type="text" id="name" placeholder="type your name" />
    </form>
    <div id="outputArea" style="display: none">
        <div id="messages" style="height: 80%; overflow: hidden">
        </div>
    </div>
</body>
</html>